<template>
	<div id="mapContainer" style="height: 100vh;">
	</div>
	
</template>
  
<script setup>
  import { onMounted } from 'vue';
  
  onMounted(() => {
	const BMapGL = window.BMap; // 直接从window对象获取BMapGL，假设已在HTML中通过src引入
	if (!BMapGL) {
	  console.error('Baidu Map API未正确加载');
	  return;
	}
  
	const initMap = () => {
	  const ak = 'JU3tf3BLYi8hOqyW94gvnAcyXtXsd6pO'; // 请确保你的AK是有效的且已授权
	  const map = new BMapGL.Map('mapContainer', { enableHighAccuracy: true }); // 创建地图实例
	  const point = new BMapGL.Point(111.322117, 30.72842); // 创建点坐标
	  map.centerAndZoom(point, 12); // 初始化地图，设置中心点坐标和地图级别
	  map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
  
	  const circle = new BMapGL.Circle(point, 20000, {
		fillColor: "blue",
		strokeWeight: 1,
		fillOpacity: 0.3,
		strokeOpacity: 0.3
	  });
	  map.addOverlay(circle);
  
	  const localSearch = new BMapGL.LocalSearch(map, {
		renderOptions: { map: map, autoViewport: false }
	  });
	  localSearch.searchNearby('供电局', point, 20000);
	};
  
	// 因为API已经在HTML中加载，直接调用初始化函数
	initMap();
  });
  </script>
  
  <style scoped>
  #mapContainer {
	height: 100%;
  }
  </style>